<template>
  <div id="container">
    <div class="chief-title">
      <h4>{{title}}</h4>
      <h6>{{subTitle}}</h6>
    </div>
    <div class="des-container">
      <template v-for="(item,index) in desCards">
        <PeopleCard1 v-bind:key="index" :title="item.title" :name="item.name" :picUrl="item.picUrl"
          :detail="item.detail"></PeopleCard1>
      </template>
    </div>
    <div class="nav-container">
      <div>
        <a-menu v-model="current" mode="horizontal">
          <a-divider type="vertical" />
          <a-menu-item key="mi-1">
            工业设计
          </a-menu-item>
          <a-divider type="vertical" />
          <a-menu-item key="mi-2">
            品牌设计
          </a-menu-item>
          <a-divider type="vertical" />
          <a-menu-item key="mi-3">
            包装设计
          </a-menu-item>
          <a-divider type="vertical" />
          <a-menu-item key="mi-4">
            文创设计
          </a-menu-item>
          <a-divider type="vertical" />
        </a-menu>
      </div>
    </div>
    <div class="oth-container">
      <template v-for="(item,index) in othCards">
        <PeopleCard2 v-bind:key="index" :title="item.title" :name="item.name" :picUrl="item.picUrl"
          :iconUrl="item.iconUrl" :tags="item.tags"></PeopleCard2>
      </template>
    </div>
  </div>
</template>
<script>
import PeopleCard1 from "./PeopleCard1";
import PeopleCard2 from "./PeopleCard2";
export default {
  name: "IntroCard1",
  components: {
    PeopleCard1,
    PeopleCard2
  },
  data() {
    return {
      title: "光合设计",
      subTitle: "国内外设计艺术大咖提供咨询顾问服务",
      desCards: [
        {
          name: "Antoine Tavaglione",
          title: "艺术家",
          picUrl:
             require("../../assets/AntoineTavaglione.png"),
          detail:
            "Antoine Tavaglione是一位来自加拿大的艺术家，最早期的艺术创作名Tongue-in-Cheek（尖叫的心脏），与潮流文化形象互相结合，将各种情绪通过巧妙的设计融入作品中，这种压抑情感的表现手法，不同的人对于作品的理解亦不相同。"
        },
        {
          name: "Dehara Yukinori",
          title: "日本艺术家",
          picUrl:
            require("../../assets/DeharaYukinori.png"),
          detail:
            "DEHARA YUKINORI(简称DEHARA),擅长使用纸黏土作为材料创作，打造出各种外形迥异、奇怪有趣人物角色。DEHARA 的作品最大的特装就是其独特的“手作感”，坚持徒手创作出独一无二的作品。DEHARA 的作品有着独特的美学视角，人物夸张怪异透露出独特的黑色幽默，将幻想与现实相结合营造出一股莫名其妙的治愈感。DEHARA 的作品有他獨特的魅力，最吸引我的是它各種外形迥異，奇怪有趣的人物角色。有的人可能會覺得它很「醜」，我看到不少的人評論說這麼醜怎麼還能賣出去，這也是我第一眼看上去的感受，但是你細看下去，看久了，會莫名覺得有點萌，甚至會感受到一種治癒感。我覺得這種情感感染力，是很可貴的，當你看到一個玩具心中的情感能被帶動，那個玩具就體現它的價值性了。"
        },
        {
          name: "Mai Nagamoto",
          title: "设计师",
          picUrl:
            require("../../assets/MaiNagamoto.png"),
          detail:
            "個人風格強烈的日本藝術家Mai Nagamoto 近年在日本的設計師玩具創作領域相當收到矚目，其獨特的創作風格在許多團展以及Custom Show 當中累積了相當多的支持者。"
        },
        {
          name: "Ron English",
          title: "设计师",
          picUrl:
            require("../../assets/RonEnglish.png"),
          detail:
            "Ron English 是一个多产的艺术家，按照他的说法，从上世纪 70 年代开始，他便在做现在被称为街头艺术的东西，主要动机是因为那里是人们聚集的地方，不像现在，都在互联网上。Ron English 的网站名字叫 POPaganda，POP 主要是因为 Ron 的作品都是从流行文化中提取元素进行个人化的再创作，就像他说的“艺术就是把你看到的经历过的私人化”，他也被称作是波普艺术家和“Low Brow”艺术运动（也叫流行超现实主义，一种起源于上世纪 70 年代的地下视觉艺术运动）的带领者之一 。Popaganda 乍一看你会以为是 Propaganda （政治宣传），在他的作品里确实会感受到一些对消费主义和政治宣传的批判意味，比如这次展览中穿着“为人民服务”的“麦胖”。"
        },
        {
          name: "北井真一郎",
          title: "日本著名设计大师",
          picUrl:
            require("../../assets/北井真一郎.png"),
          detail:
            "Devil Robots，1997 年成立于东京，是以北井真一郎为主理的 6 人设计团队，范围涉及广泛，包括了平面、插画、动画、音乐、潮装、网页及玩具设计等。\n"
              + "创作概念主打 Cuteness and Blackness（带毒的可爱）的特别治愈系风格。\n"
              + "曾与多个国际品牌合作，Paul Smith、Sony、nokia、可口可乐及迪士尼等。其中受迪士尼邀请为米老鼠、小熊维尼、超人特工队等众多形象设计的玩偶公仔，备受赏识。"
        },
      ],
      current: ["mi-1"],
      othCards: [
        {
          name: "Eric So",
          title: "产品设计师",
          tags: ["擅长智能硬件", "服务汉王", "获红星奖"],
          picUrl:
              require("../../assets/EricSo.jpg"),
          iconUrl:
            "https://tva1.sinaimg.cn/large/006y8mN6ly1g7xxrvw25bj301c00mjr5.jpg"
        },
        {
          name: "Ranger",
          title: "产品设计师",
          tags: ["擅长智能硬件", "服务汉王", "获红星奖"],
          picUrl:
              require("../../assets/Ranger.jpg"),
          iconUrl:
            "https://tva1.sinaimg.cn/large/006y8mN6ly1g7xxrvw25bj301c00mjr5.jpg"
        },
        {
          name: "金迪安",
          title: "产品设计师",
          tags: ["擅长智能硬件", "服务汉王", "获红星奖"],
          picUrl:
              require("../../assets/金迪安.jpg"),
          iconUrl:
            "https://tva1.sinaimg.cn/large/006y8mN6ly1g7xxrvw25bj301c00mjr5.jpg"
        },
        {
          name: "蓝图斯",
          title: "产品设计师",
          tags: ["擅长智能硬件", "服务汉王", "获红星奖"],
          picUrl:
            require("../../assets/蓝图斯.jpg"),
          iconUrl:
            "https://tva1.sinaimg.cn/large/006y8mN6ly1g7xxrvw25bj301c00mjr5.jpg"
        },
        {
          name: "龙家升",
          title: "产品设计师",
          tags: ["擅长智能硬件", "服务汉王", "获红星奖"],
          picUrl:
              require("../../assets/龙家升.png"),
          iconUrl:
            "https://tva1.sinaimg.cn/large/006y8mN6ly1g7xxrvw25bj301c00mjr5.jpg"
        },
        {
          name: "丧钟大师",
          title: "产品设计师",
          tags: ["擅长智能硬件", "服务汉王", "获红星奖"],
          picUrl:
              require("../../assets/丧钟大师.jpg"),
          iconUrl:
            "https://tva1.sinaimg.cn/large/006y8mN6ly1g7xxrvw25bj301c00mjr5.jpg"
        }
      ]
    };
  }
};
</script>

<style scoped>
#container {
  width: 100%;
  background-color: #ffffff;
}

.des-container {
  width: 70%;
  display: flex;
  margin-left: auto;
  margin-right: auto;
  justify-content: flex-start;
}

.nav-container {
  width: 70%;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
}

.oth-container {
  width: 70%;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.chief-title {
  padding-top: 60px;
  text-align: center;
  color: #000;
  font-size: 30px;
}
.chief-title h6 {
  font-size: 22px;
  color: #999;
  text-align: center;
  font-weight: 400;
  margin-bottom: 40px;
}
.sub-title {
  text-align: center;
  color: #000;
  font-size: 25px;
}

.ant-menu-horizontal,
.ant-menu-submenu,
.ant-menu-item-selected,
.ant-menu-item-active,
.ant-menu-item:hover {
  border: 0;
}
</style>